/**
 * 列选择器
 */
import { Button, Checkbox } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from './simpleSelector.less'

interface ColumnSelectorProps {
  title?: string;
  columnOptions: any; // 列名
  checkedValues?: any; // 选中的列
  changeColumns?: ([]) => void; // 点击确认按钮
  setPopoverVisible?: any; 
  style?: any;
}

const CheckboxGroup = Checkbox.Group;

const SimpleColumnSelector = (props: ColumnSelectorProps) => {
  const [selectedColumns, setSelectedColumns] = useState([]); // 选择显示的列

  let { title, columnOptions, checkedValues, changeColumns,setPopoverVisible } = props;

  const onChangeColumns = (list) => {
    setSelectedColumns(list);
    console.log(list)
  };

  const confirmColumns = ()=>{
    changeColumns && changeColumns(selectedColumns);
    setPopoverVisible && setPopoverVisible(false);
  }

  useEffect(() => {
    setSelectedColumns(checkedValues);
  }, [checkedValues]);

  return (
    <>
      <div className={styles.confirm}>
        <span>{title}</span>
        <Button className={styles.btn_confirm} onClick={confirmColumns}>
          <i className={styles.icon_checked}></i>
        </Button>
      </div>
      <CheckboxGroup
        className={styles.pop_checkbox}
        style={props.style}
        options={columnOptions}
        value={selectedColumns}
        onChange={onChangeColumns}
      />
    </>
  );
};
export default SimpleColumnSelector;
